<template>
	<div>
		<!-- 导航栏 -->
		<van-nav-bar title="编辑收货地址" left-text="" right-text='删除' @click-left="onClickLeft" @click-right="showPopup"
			left-arrow>
		</van-nav-bar>
		<!-- 内容 -->

		<van-form @submit="onSubmit">
			<!-- 收货人 -->
			<!-- :rules="[{ required: true, message: '请填写收货人' }]" /> -->
			<van-cell-group>
				<van-field v-model="username" label="收货人:" placeholder="收货人" />
			</van-cell-group>
			<!-- 手机号 -->
			<van-cell-group>
				<van-field v-model="phone" type="tel" name="手机号" label="手机号:" placeholder="手机号" />
			</van-cell-group>
			<!--请选择所在地区-->
			<van-cell-group>
				<van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区"
					@click-input='changeAddres' />
			</van-cell-group>
			<!-- 选择地址弹出层-->
			<van-popup v-model="show" round position="bottom" :style="{ height: '46%' }">
				<van-area title="请选择地址" :area-list="areaList" @cancel='canceLclick' @confirm='btnconfirm' />
			</van-popup>
			<!-- 请填写详细地址 -->
			<van-cell-group>
				<van-field v-model="site" type="text" name="详细地址" label="详细地址:" placeholder="详细地址" />
			</van-cell-group>
			<!-- 设为默认地址 -->
			<van-cell-group>
				<van-switch-cell v-model="checked" title="设为默认地址" />
			</van-cell-group>
			<!-- 删除 -->
			<van-dialog v-model="showdel" title="确定要删除吗" show-cancel-button>
			</van-dialog>
			<!-- 保存 -->
			<div style="margin: 16px;">
				<van-button class="jrgwcys" block type="info" native-type="submit" @click='baocun()'>保存</van-button>
			</div>
		</van-form>

	</div>
</template>

<script>
	import {
		areaList
	} from '@vant/area-data'
	import {
		showreslist,
		addreslist,
		updaterslist,
		deladdress
	} from '../lib/address.js'
	import {
		Notify
	} from 'vant';
	import {
		Dialog
	} from 'vant';
	export default {
		data() {
			return {
				areaList,
				username: '',
				phone: '',
				fieldValue: '',
				site: '',
				addreslists: [],
				show: false,
				checked: true,
				showdel: false,
			};
		},
		methods: {
			// 显示地址选项层
			changeAddres() {
				this.show = true;
			},
			//确认
			btnconfirm(e) {
				console.log(e)
				//赋值
				this.addreslists = e
				let city = ""
				//赋值
				for (let i = 0; i < e.length; i++) {
					city += e[i].name
				}
				//赋值
				this.fieldValue = city;
				this.show = false;
			},
			// 取消
			canceLclick() {
				this.show = false;
			},
			// 返回上一个页面
			onClickLeft() {
				this.$router.go(-1)
			},
			showPopup() {
				Dialog.confirm({
						title: "地址删除",
						message: `你确定要删除${this.$route.query.id.name}这条数据吗？`,
					})
					.then(() => {
						// 确认删除
						deladdress({
							id: this.$route.query.id.id
						}).then(res => {
							console.log(res)
							this.onClickLeft()
						})
					})
					.catch(() => {
						// 取消删除
						console.log("取消删除")
					});
			},
			//保存
			onSubmit(values) {
				// console.log('submit', values);

			},
			baocun(_id = 0) {

				if (this.username === "") {
					Notify({
						type: 'warning',
						message: '请填写收货人'
					});
				} else if (this.phone === "") {
					Notify({
						type: 'warning',
						message: '请填写手机号'
					});
				} else if (this.fieldValue == "") {
					Notify({
						type: 'warning',
						message: '请选择所在地区'
					});
				} else if (this.site === "") {
					Notify({
						type: 'warning',
						message: '请填写详细地址'
					});
				} else {

					let options = {
						province: this.addreslists[0].name,
						city: this.addreslists[1].name,
						district: this.addreslists[2].name,
						address: this.site,
						zip: '',
						name: this.username,
						phone: this.phone,
						default: this.defaultNum

					}
					if (this.$route.query.id) {
						console.log(this.$route.query.id.id)
						options.id = this.$route.query.id.id
						updaterslist({
							...options
						}).then(res => {
							this.onClickLeft()
						})

					} else {
						addreslist({
							...options
						}).then(res => {
							this.onClickLeft()
						})

					}

				}
			}
		},
		created() {
			let item = this.$route.query.id;
			if (item) {
				this.username = item.name,
					this.phone = item.phone,
					this.fieldValue = item.province + '' + item.city + '' + item.district,
					this.site = item.address;
				this.addreslists = [{
					name: item.province
				}, {
					name: item.city
				}, {
					name: item.district
				}]
			}
		},
		computed: {
			defaultNum() {
				if (this.checked) {
					return 1
				} else {
					return 0
				}
			}
		}
	}
</script>

<style>
	.jrgwcys {
		width: 100%;
		height: 3rem;
		background-color: rgb(255, 94, 0);
		color: white;
		border: none;
	}
</style>
